/* 使用现代 CSS 特性 */
:root {
  --primary-color: #3498db;
  --spacing: 1rem;
}

.container {
  display: grid;
  gap: var(--spacing);
  
  /* 嵌套语法 */
  .item {
    background: var(--primary-color);
    border-radius: 8px;
    padding: calc(var(--spacing) * 2);
    
    &:hover {
      transform: scale(1.05);
    }
  }
}

/* 自动前缀测试 */
.flex-container {
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

/* 未来 CSS 特性 */
.card {
  backdrop-filter: blur(10px);
  
  @media (width >= 768px) {
    padding: 2rem;
  }
}